<template>
  <div class="footer">
    <!--    最左侧的按钮div-->
    <div class="footer-box" v-for="item in footerList" :key="item.id">
<!--      小图标按钮区域的第一个div-->
      <div class="more">
        <div class="iconfont icon">&#xe699;</div>
        <div class="word">
          更多
        </div>
      </div>
      <div class="more">
        <div class="iconfont icon">&#xe669;</div>
        <div class="word">
          收藏
        </div>
      </div>
      <div class="more">
        <div class="iconfont icon">&#xe6bc;</div>
        <div class="word">
          客服
        </div>
      </div>
      <div class="price1" @click="addCart">
        <div>￥{{item.price}}</div>
        <div>发起拼单</div>
      </div>
      <div class="price2" @click="addCart">
        <div>￥{{item.yuanjia}}</div>
        <div>单独购买</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsFooter',
  props: {
    footerList: Array,
    middleList: Array
  },
  methods: {
    addCart () {
      this.$store.commit('shopcart/addShopcart', {
        id: this.middleList[0].id,
        name: this.middleList[0].desc,
        price: this.middleList[0].price,
        img: this.middleList[0].goodsimg[0].imgUrl,
        count: 1,
        selected: true
      })
      this.$toast('加入购物车成功，快去结算吧！')
    }
  }
}
</script>

<style scoped lang="stylus">
  .footer
    position fixed
    bottom 0
    height 0
    overflow hidden
    padding-bottom 15%
    background-color white
    width 100%
    .footer-box
      .more
        display inline-block
        margin-left 0.6rem
        margin-top 0.5rem
        font-size 0.7rem
        text-align center
        .icon
          font-size 1.5rem
      .price1,.price2
        float right
        width 8rem
        height 4rem
        background-color #f3aba7
        text-align center
        color white
      .price1
        background-color #e02e24
</style>
